<template>
  <div class="servive_detail">
    <van-sticky>
      <van-nav-bar :title="detail.packageName" v-show="!flag" left-arrow @click-left="back">
        <template #right>
          <!-- <van-icon name="share" @click="showShare = true" size="18" /> -->
		   <van-icon name="share" size="18" @click='sharefun'/>
        </template>
      </van-nav-bar>
	  <van-nav-bar :title="detail.packageName" v-show="flag" left-arrow @click-left="gohome">
	    <template #right>
	      <!-- <van-icon name="share" @click="showShare = true" size="18" /> -->
	  		   <van-icon name="share" size="18" @click='sharefun'/>
	    </template>
	  </van-nav-bar>
    </van-sticky>
    <div class="banner">
     <!-- <swiper :options="bannerOption" ref="bannerSwiper">
        <swiper-slide v-for="(slide,index) in detail.goodsSerList" :key="index">
       
          <img :src="slide" alt="" style="width:100%">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination" v-if="slides.length > 1"></div>
      </swiper> -->
	   <img :src="detail.titleImgUri" alt="" style="width:100%">
    </div>

    <div class="infor">
      <div class="row-between-center">
        <strong class="name">{{detail.packageName}}</strong>
        <!-- <span class="salenum">累计销售<span>{{detail.sellNum}}</span></span> -->
      </div>
      <div class="price">
        {{detail.packagePrice}} <!-- <small>{{detail.originalPrice}}</small> -->
      </div>
    </div>
    <van-cell-group v-if='detail.goodsSerList'>
      <!-- <van-cell title="服务地区" :value="detail.regionName" /> -->
      <!-- <van-cell title="服务项目" @click="showLevel = true" :value="detail.serviceName" /> -->
	  <div style="font-size: 0.35rem;margin-left: 0.35rem;color: #111111;font-weight: bold;padding-top: 0.2rem;">服务列表</div>
	 <div v-if="detail.goodsSerList">
		  <van-cell v-for="item in detail.goodsSerList"  :title="item.serviceName" />
	 </div>
      <van-cell title="服务保障" :value="detail.secLabel" />
    </van-cell-group>

    <div class="intreduce">
      <h4 class="title">服务介绍</h4>
      <p class="text htmlstyle" v-html="detail.packageText">一般说来，在进行技术开发、新产品研制过程中取得的成果，因其技术水平较高，都应申请发明专利。</p>

    </div>

  <!--  <div class="process">
      <h4 class="title">服务流程</h4>
      <img :src="detail.processImgUrl" alt="">
    </div>

    <div class="need intreduce">
      <h4 class="title">所需资料</h4>
      <p class="text" v-html="detail.materials">申请人的姓名或名称（全称）、地址、邮编</p>
    </div> -->

   <div class="custum_say">
      <div class="title row-between-center">
        <strong>用户评价 ({{detail.goodEvaluations.length}})</strong>
        <router-link tag="span" class="row-between-center" :to="{ path: `/evaluate/${this.$route.params.id}/PACKAGE` }">全部
          <van-icon name="arrow" />
        </router-link>
      </div>

      <div class="list van-hairlinebottom" v-for="(item,index) in detail.goodEvaluations" :key="index">
        <div class="row-between-center">
          <div class="user row-between-center">
            <div class="head" :style="{backgroundImage:`url(${item.userHead})`}"></div>
            <div class="text">
              <p class="name">{{item.userName}}</p>
              <van-rate v-model="item.quality" readonly />
            </div>
          </div>
          <span class="time">{{item.insertTime}}</span>
        </div>
        <div class="tags">
          <span class="tag">服务态度<i></i>{{starText[item.attitude]}}</span>
          <span class="tag">服务质量<i></i>{{starText[item.quality]}}</span>
          <span class="tag">办理速度<i></i>{{starText[item.speed]}}</span>
        </div>
        <p class="text">{{item.evaContent}}</p>
      </div>
    </div>

  <!--  <div class="need intreduce">
      <h4 class="title">服务保障</h4>
      <p class="text" v-html="detail.secLabel">明码标价，公开透明</p>
    </div>

    <div class="question">
      <h4 class="title">常见问题</h4>
      <div class="list" v-html="detail.question">
        <h6 class="qs">Q:客户至上，服务一定做到客户满意为止</h6>
        <div class="conetnt">
          <span>A:</span>
          <p>人们通过研究开发出来的关于各种新产品、新材料、新物质等的技术方案。专利法上的产品，可以是一个独立、完整的产品，也可以是一个设备或仪器中的零部件。其主内容包括：制造品，如机器、设备以及各种用品材料，如化学物质、组合物等具有新用途的产品。</p>
        </div>
      </div>

    </div> -->
    <!-- <van-divider>——已到底了——</van-divider> -->
    <p class="no_more">——已到底了——</p>

    <div class="footer_bar">
      <router-link tag="span" :to="{path:`/online/${$route.params.id}`}" class="left">咨询</router-link>
      <router-link tag="span" :to="{ path: `/orderconfirm/${this.$route.params.type}/${this.$route.params.id}` }" class="right">下一步</router-link>
    </div>

    <!-- 认证等级 -->
    <van-popup v-model="showLevel" position="bottom">
      <van-picker show-toolbar :columns="level" @confirm="onConfirm(...arguments,'level')" @cancel="showLevel = false" />
    </van-popup>
    <share-pic v-if="showShare" :detail="detail" @close="showShare = false"></share-pic>
  </div>

</template>

<script>
import api from "api/api"
export default {
  data () {
    return {
      star: 5,
      detail: {},
      bannerOption: {
        autoplay: false,
        slidesPerView: 'auto',
        loop: true,
        spaceBetween: 8,
        pagination: {
          el: '.swiper-pagination'
        }
      },
      starText: ['非常差', '很差', '一般', '还行', '好', '很好'],
      activeIndex: 0,
      fadeOut: false,
      slides: [{
        pictureUrl: require('../../assets/img/home/banner.png'),
        goodsId: 0
      }
      ],
      projectList: [],
      showLevel: false,
      level: [],
      showShare: false,
	  shopid:'',
	  shopurl:'',
	  flag:''
    }
  },
  computed: {
    project: function () {
      var arr = this.projectList.filter(val => {
        return val.id == this.$route.params.id
      })
      return arr[0] || {}
    }
  },
  created () {
    this.getData()
	this.shopid=this.$route.params.id,
	this.shopurl=window.location.href
		this.share()
  },
  methods: {
	  share(){
	  		  var str=window.location.href
			  this.flag=str.search('share=')!= -1
	  		  if(str.search('share=')!= -1){
	  			  var sharecode=str.split('share=')[1]
	  			  api.sharecallback({data:sharecode}).then(res=>{
	  			  	
	  			  })
	  		  }
	  		  },
			  gohome(){
				  this.$router.push('/')
			  },
	  sharefun(){
		  console.log(this.detail)
		  // return
	  		  this.$router.push({name:'tcsharepage',params:{id:this.shopid,money:this.detail.packagePrice,url:this.shopurl}})
	  },
    getData () {
      var type = this.$route.params.type
  //     if (type == 'package') {
		// api.packageDeatail({
		//   data: {
		//     id: this.$route.params.id
		//   }
		// }).then(res => {
		//   console.log('taocan',res)
		//   var detail = res.data
		//   // detail.goodsSerList.forEach(element => {
		//   //   element.average = (element.attitude + element.quality + element.speed) / 3
		//   // });
		//   this.detail = detail
		// })
  //     } else {
   
		api.packageDeatail({
		  data: {
		    id: this.$route.params.id,
		  }
		}).then(res => {
			console.log(res.data)
		  var detail = res.data
		  // detail.goodsSerList.forEach(element => {
		  //   element.average = (element.attitude + element.quality + element.speed) / 3
		  // });
		  this.detail = detail
				console.log('detail',this.detail)
			
		  this.getserve()
		})
      // }
  

    },
    getserve () {
		console.log('id',this.$route.params.id)
      api.projectList({
        data: {
          id: this.$route.params.id,
        }
      }).then(res => {
		  console.log('newdata',res.data)
        this.projectList = res.data
        this.projectList.forEach(v => {
          v.text = v.serviceName
        })
        this.level = this.projectList
        this.detail = Object.assign({}, this.detail, this.projectList[0])
		// console.log(this.detail)
      })
    },
    back () {
      window.history.go(-1)
    },
    onConfirm (val) {
      this.showLevel = false
      console.log(val)
      this.detail = Object.assign({}, this.detail, val)
      console.log(this.detail)
    }
  }
}
</script>

<style lang="scss">
.servive_detail {
  background-color: #f5f5f5;
  text-align: left;
  .infor {
    font-size: 0.24rem;
    padding: 0.27rem;
    background-color: #fff;
    margin-bottom: 0.16rem;
    .name {
      font-size: 0.36rem;
    }
    .salenum {
      font-size: 0.22upx;
      color: #999;
      span {
        color: #ff344c;
      }
    }
    .price {
      font-size: 0.32rem;
      color: #ff344c;
      margin-bottom: 0.2rem;
      small {
        color: #999;
        text-decoration-line: line-through;
      }
    }
  }
  .intreduce {
    padding: 0.3rem;
    background-color: #fff;
    margin: 0.17rem 0;
    .title {
      font-size: 0.32rem;
    }
    .text {
      font-size: 0.28rem;
      color: #333;
      position: relative;
      padding-left: 0.3rem;
      margin-top: 0.37rem;
      &::before {
        content: "";
        position: absolute;
        left: 0rem;
        top: 0.15rem;
        width: 0.1rem;
        height: 0.1rem;
        border-radius: 50%;
        background-color: #000;
      }
    }
  }
  .process {
    background-color: #fff;
    padding: 0.3rem;
    .title {
      font-size: 0.32rem;
    }
    img {
      width: 100%;
      margin-top: 0.28rem;
    }
  }

  .custum_say {
    background-color: #fff;
    padding: 0.3rem;
    .title {
      font-size: 0.32rem;
      margin-bottom: 0.05rem;
      span {
        color: #348aff;
      }
    }
    .list {
      padding: 0.27rem 0;
      .user {
        .head {
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 50%;
          margin-right: 0.2rem;
          background-size: cover;
        }
        .name {
          font-size: 0.28rem;
        }
        .van-rate__icon {
          font-size: 0.28rem;
        }
      }
      .time {
        font-size: 0.22rem;
        color: #999;
      }
      .tags {
        display: flex;
        flex-wrap: wrap;
        padding: 0.2rem 0;
        .tag {
          padding: 0.11rem;
          font-size: 0.24rem;
          border: 0.01rem solid rgba(153, 153, 153, 1);
          border-radius: 0.03rem;
          margin-right: 0.13rem;
          display: flex;
          align-items: center;
          i {
            margin: 0 0.11rem;
            display: inline-block;
            height: 0.23rem;
            width: 1px;
            background-color: #000;
          }
        }
      }
      .text {
        font-size: 0.24rem;
      }
    }
  }
  .question {
    background-color: #fff;
    padding: 0.3rem;
    font-size: 0.28rem;
    .title {
      font-size: 0.32rem;
      margin-bottom: 0.05rem;
    }
    .list {
      margin-top: 0.21rem;
      .qs {
        font-size: 0.28rem;
        color: #333;
        font-weight: normal;
      }
      .conetnt {
        position: relative;
        font-size: 0.24rem;
        color: #999;
        margin-top: 0.11rem;
        span {
          position: absolute;
          left: 0;
        }
        p {
          padding-left: 0.3rem;
        }
      }
    }
  }
  .no_more {
    font-size: 0.22rem;
    color: #999;
    text-align: center;
    padding: 0.3rem 0 3rem 0;
  }
  .footer_bar {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    line-height: 0.98rem;
    font-size: 0.36rem;
    text-align: center;
    .left {
      width: 50%;
      color: #ff8a34;
      background-color: #fff;
    }
    .right {
      width: 50%;
      color: #ffffff;
      background: linear-gradient(
        96deg,
        rgba(72, 143, 240, 1),
        rgba(51, 130, 239, 1)
      );
    }
  }
}
</style>